<script lang="ts" setup>
import { useToast } from '@/utils'
import { ref } from 'vue'

const src = ref('')

const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
const input5 = ref('')
const input6 = ref('')

function handleOpen() {
  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    camera: 'back',
    success: async (e) => {
      console.log('[res]', e)

      // useLoading(true)
      // await to(
      //   upload({ filePath: e.tempFilePath }),
      // )
      // useHideLoading()
      src.value = e.tempFilePath
    },
    fail: (e) => {
      console.log('[err]', e)
    },
  })
}

function onInputFocus(type: string) {
  useToast(`focus: ${type}`)
}
</script>

<template>
  <view class="flex flex-col gap-y-4px">
    <input v-model="input1" class="box-border h-90px bg-gray-50 px-10px lh-90px active:bg-gray-200" type="text" placeholder="type='text'" @focus="onInputFocus('text')">
    <input v-model="input2" class="box-border h-90px bg-gray-50 px-10px lh-90px active:bg-gray-200" type="text" password placeholder="type='text' password" @focus="onInputFocus('text password')">
    <input v-model="input3" class="box-border h-90px bg-gray-50 px-10px lh-90px active:bg-gray-200" type="number" placeholder="type='number'" @focus="onInputFocus('number')">
    <input v-model="input4" class="box-border h-90px bg-gray-50 px-10px lh-90px active:bg-gray-200" type="idcard" placeholder="type='idcard'" @focus="onInputFocus('idcard')">
    <input v-model="input5" class="box-border h-90px bg-gray-50 px-10px lh-90px active:bg-gray-200" type="digit" placeholder="type='digit'" @focus="onInputFocus('digit')">
    <input v-model="input6" class="box-border h-90px bg-gray-50 px-10px lh-90px active:bg-gray-200" type="tel" placeholder="type='tel'" @focus="onInputFocus('tel')">

    <!-- <button @click="handleOpen">open</button> -->

    <!-- <video v-if="!isEmpty(src)" :src="src" controls></video> -->
  </view>
</template>

<style lang="less" scoped></style>
